/* 白名单
 * @Author: wujie 
 * @Date: 2018-06-12 11:06:22 
 * @Last Modified by: wujie
 * @Last Modified time: 2018-07-04 11:42:14
 */
import React,{ Component } from 'react'
import { Row, Modal } from 'antd'
import components from '@/components'
import { connect } from 'react-redux'
import actions from '@/actions/whiteList'
import util from '@/utils'

const { WhiteListSearch, WhiteListTable, WhiteListAddModal, Card } = components

class WhiteList extends Component {

  render() {
    
    const searchProps = util.pick(this.props,[
      'account',
      'phone',
      'startTime',
      'endTime',
    ])

    const searchFunProps = util.pick(this, [
      'onChangePhone',
      'onChangeStartTime',
      'onChangeEndTime',
      'onSearch',
      'onAdd',
    ])

    const tableProps = util.pick(this.props, [
      'pageNum',
      'pageSize',
      'total',
      'loading',
      'data'
    ])

    const tableFunProps = util.pick(this, [
      'onChangePagination',
      'onDelete',
    ])

    const modalProps = util.pick(this.props, [
      'isAddModalShow',
      'addButtonLoading',
      'addPhone'
    ])

    const modalFunProps = util.pick(this, [
      'onAddModalSure',
      'onAddModalCancel',
      'onChangeAddPhone',
    ])

    return (
      <div>
        <Card title="白名单">
          <Row style={{padding:24, backgroundColor: '#fff'}}>
            <WhiteListSearch 
              {...searchProps}
              {...searchFunProps}
            />
            <WhiteListTable  
              {...tableProps}
              {...tableFunProps}
            />
            <WhiteListAddModal 
              {...modalProps} 
              {...modalFunProps}
            />
          </Row>
        </Card>
      </div>
    )
  }

  componentDidMount(){
    this.props.getData()
  }

  onChangePhone = ({ target: { value }}) => {
    this.props.setPhone(value)
  }

  onChangeStartTime = (value) => {
    this.props.setStartTime(value)
  }

  onChangeEndTime = (value) => {
    this.props.setEndTime(value)
  }

  onSearch = () => {
    this.props.setPageNum(1)
    this.props.getData()
  }

  onAdd = () => {
    this.props.showAddModal()
  }

  onChangePagination = (value) => {
    this.props.setPageNum(value)
    this.props.getData()
  }

  onChangeAddPhone = ({ target: { value }}) => {
    this.props.setAddPhone(value)
  }

  onAddModalSure = () => {
    this.props.addData()
  }

  onAddModalCancel = () => {
    this.props.hiddenAddModal()
  }

  onDelete = (value) => {
    const _this = this
    Modal.confirm({
      title: '提示',
      maskClosable: true,
      content: '确定删除此条记录？',
      onOk(){
        _this.props.deleteData(value)
      }
    })
  }

} 

const mapStateToProps = (({ whiteListReducer }) => ({ ...whiteListReducer }))

const mapDispatchToProps = { ...actions }

export default connect(mapStateToProps, mapDispatchToProps)(WhiteList)


